<template>
  <div class="home">
    <div class="wc head">
      <div v-if="!userStore.state.token" @click="toLogin" class="left hc">
        <van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" size="50" />
        <div class="login">登陆</div>
      </div>
      <div v-else class="left hc">
        <van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" size="50" />
        <div class="login">{{userStore.state.user.name}}</div>
      </div>
    </div>
    <van-cell-group>
      <van-cell title="版本" value="v1.0" size="large"/>
      <van-cell title="密码" value="*******" size="large"/>
    </van-cell-group>
    <van-button v-if="userStore.state.token" @click="loginOut()" style="width:100%" type="warning">退出登陆</van-button>
  </div>
</template>
<script>
import {userStore} from '../../store/user.js'
import tabbar from '../../components/tabbar/index.vue'
import navbar from '../../components/navbar/index.vue'
import { computed, defineComponent,ref,toRefs,onMounted,reactive,watch,getCurrentInstance } from 'vue'
export default defineComponent({
  components:{
    tabbar,
    navbar
  },
  setup(props) {
    const { proxy } = getCurrentInstance()
    const data = reactive({
      form:{}
    })
    const toLogin = () => {
      proxy.$router.push("/login")
    }
    const loginOut = async () => {
      userStore.loginOut()
      proxy.$router.push("/login")
    }
    return{
      ...toRefs(data),
      userStore,
      toLogin,
      loginOut
    }
  }
})
</script>
<style lang="less" scoped>
.home{
  // background:rgba(248,248,248,1);
  background: white;
  min-height: calc(100vh);
  overflow: hidden;
  background-size: cover;
  position: relative;
  .head{
    padding: 100px 0;
    // border-bottom: 1px solid rgba(153, 153, 153,0.1);
  }
  .login{
    font-size: .26rem;
    padding-left: 20px;
  }
}

</style>
